<!DOCTYPE html>
<html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../lib/klass.min.js"></script>
	<script type="text/javascript" src="../code.photoswipe-3.0.4.min.js"></script>
	
	
	<script type="text/javascript">

		(function(window, PhotoSwipe){
		
			document.addEventListener('DOMContentLoaded', function(){
			
				var
					options =  {
				
						getImageMetaData: function(el){
							return {
								href: el.getAttribute('href'),
								something: el.getAttribute('data-something'),
								anotherThing: el.getAttribute('data-another-thing')
							}
						}
						
					},
					instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
				
				
				instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
				
					var currentImage = instance.getCurrentImage();
					console.log(currentImage.metaData.something);
					console.log(currentImage.metaData.anotherThing);
					
				});
					
					
			}, false);
			
			
		}(window, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div id="Header">
	<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>PhotoSwipe</h1>
	</div>
	
	<ul id="Gallery" class="gallery">
		
		<li><a href="images/full/001.jpg" data-something="something1" data-another-thing="anotherthing1"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
		<li><a href="images/full/002.jpg" data-something="something2" data-another-thing="anotherthing2"><img src="images/thumb/002.jpg" alt="Image 002" /></a></li>
		<li><a href="images/full/003.jpg" data-something="something3" data-another-thing="anotherthing3"><img src="images/thumb/003.jpg" alt="Image 003" /></a></li>
		<li><a href="images/full/004.jpg" data-something="something4" data-another-thing="anotherthing4"><img src="images/thumb/004.jpg" alt="Image 004" /></a></li>
		<li><a href="images/full/005.jpg" data-something="something5" data-another-thing="anotherthing5"><img src="images/thumb/005.jpg" alt="Image 005" /></a></li>
		<li><a href="images/full/006.jpg" data-something="something6" data-another-thing="anotherthing6"><img src="images/thumb/006.jpg" alt="Image 006" /></a></li>
		<li><a href="images/full/007.jpg" data-something="something7" data-another-thing="anotherthing7"><img src="images/thumb/007.jpg" alt="Image 007" /></a></li>
		<li><a href="images/full/008.jpg" data-something="something8" data-another-thing="anotherthing8"><img src="images/thumb/008.jpg" alt="Image 008" /></a></li>
		<li><a href="images/full/009.jpg" data-something="something9" data-another-thing="anotherthing9"><img src="images/thumb/009.jpg" alt="Image 009" /></a></li>
		<li><a href="images/full/010.jpg" data-something="something10" data-another-thing="anotherthing10"><img src="images/thumb/010.jpg" alt="Image 010" /></a></li>
		<li><a href="images/full/011.jpg" data-something="something11" data-another-thing="anotherthing11"><img src="images/thumb/011.jpg" alt="Image 011" /></a></li>
		<li><a href="images/full/012.jpg" data-something="something12" data-another-thing="anotherthing12"><img src="images/thumb/012.jpg" alt="Image 012" /></a></li>
		<li><a href="images/full/013.jpg" data-something="something13" data-another-thing="anotherthing13"><img src="images/thumb/013.jpg" alt="Image 013" /></a></li>
		<li><a href="images/full/014.jpg" data-something="something14" data-another-thing="anotherthing14"><img src="images/thumb/014.jpg" alt="Image 014" /></a></li>
		<li><a href="images/full/015.jpg" data-something="something15" data-another-thing="anotherthing15"><img src="images/thumb/015.jpg" alt="Image 015" /></a></li>
		<li><a href="images/full/016.jpg" data-something="something16" data-another-thing="anotherthing16"><img src="images/thumb/016.jpg" alt="Image 016" /></a></li>
		<li><a href="images/full/017.jpg" data-something="something17" data-another-thing="anotherthing17"><img src="images/thumb/017.jpg" alt="Image 017" /></a></li>
		<li><a href="images/full/018.jpg" data-something="something18" data-another-thing="anotherthing18"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
		
	</ul>
	
</div>	

	
<div id="Footer">
	<p><small>&copy; 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>

	<div id="SocialLinks">
		<a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
		<a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
		<a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
		<a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
	</div>
	
</div>

</body>
</html>
